<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body> 
		
<!-- 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
-->
			 
        <div id="app">
          <p>单个复选框：</p>
          <input type="checkbox" id="checkbox" v-model="checked">
		  <!--label 标签的 for 和标签绑定在一起了，点击checkbox或点击文本都会触发选中与不选中 -->
          <label for="checkbox">{{ checked }}</label>
            
          <p>多个复选框：</p>
		  
          <input type="checkbox" id="liyou" value="1" v-model="checkedNames">
		  <label for="liyou">旅游</label>
		  
		  
		  
          <input type="checkbox" id="dushu" value="2" v-model="checkedNames">
          <label for="dushu">读书</label>
		  
		  
          <input type="checkbox" id="paobu" value="3" v-model="checkedNames">
          <label for="paobu">跑步</label>
          <br>
          <span>选择的值为: {{ checkedNames }}</span>
        </div>
         
        <script>
        new Vue({
          el: '#app',
          data: {
            checked : false,
            checkedNames: []
          }
        })
        </script>

	</body>
</html>


